<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="ad" style="width: 200px;height: 200px;background: #58a;"></div>
    <script>
        // 箭头函数实践
        // 需求: 点击div  1s后变成粉色
        let ad = document.querySelector('#ad');
        // console.log(ad);
        // ad.addEventListener("click", function () {
        //     // 定时器
        //     setTimeout(function () {
        //         // 修改背景色 this
        //         console.log(this); //window
        //         this.style.background = 'pink';//定时器调用，this指向window
        //     }, 1000)
        // })

        // ad.addEventListener("click", function () {
        //     let _this = this;
        //     // 定时器
        //     setTimeout(function () {
        //         // 修改背景色 this
        //         console.log(this); //window
        //         _this.style.background = 'pink';
        //     }, 1000)
        // })

        // 箭头函数解决：
        ad.addEventListener("click", function () {
            setTimeout(() => {
                console.log(this);//指向对象ad
                this.style.background = 'pink';
            }, 1000)
        })

        // 需求2 从数组中返回偶数元素
        const arr = [1, 6, 9, 10, 100, 25];
        // const result = arr.filter(function (item) {
        //     if (item % 2 === 0) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });    
        // console.log(result);//6 10 100

        // 箭头函数
        const result = arr.filter((item) =>item % 2 === 0)
        console.log(result);//6 10 100


        //箭头函数适合与this无关的回调 ，定时器，数组的对调
        // 箭头函数不适合与this有关的回调，事件回调，对象的方法
        let a = {
            name:"贵妇",
            getName:function(){
                this.name
                console.log(this);
            }
        }
        a.getName();//this指向a

        let b = {
            name:"贵妇b",
            getName:()=>{
                this.name
                console.log(this);
            }
        }
        b.getName();//this指向window
    </script>
</body>

</html>